/*
* @SearchComp.vue
* @description 搜索表单组件
* @author chenzhihui
* @update (chenzhihui 2020/3/28)
*/
<template>
    <div class="search-mtop">
        <!--筛选搜索表单-->
        <el-form class="demo-form-inline flex" label-position="top">
            <el-form-item label="姓名" class="flex fontcolor">
                <el-input v-model="searchForm.userRelatedQueryCondition.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="身份证" class="flex formpading">
                <el-input v-model="searchForm.userRelatedQueryCondition.num" placeholder="请输入身份证号"></el-input>
            </el-form-item>
            <el-form-item label="性别" class="flex formpading">
                <el-select v-model="searchForm.userRelatedQueryCondition.sex" placeholder="请选择性别">
                    <el-option label="男" value="male"></el-option>
                    <el-option label="女" value="female"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址" class="flex formpading">
                <el-input v-model="searchForm.userRelatedQueryCondition.address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="民族" class="flex formpading">
                <el-select v-model="searchForm.userRelatedQueryCondition.nationality" placeholder="请请输入民族">
                    <el-option
                            v-for="item in dictData[0].nationality"
                            :label="item"
                            :value="item"
                            :key="item"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div class="cleanAll">
            <el-button class="buttongd" @click="cleanAll">清除筛选</el-button>
        </div>
    </div>

</template>

<script>
    import {baseServe} from "../../request/api";
    export default {
        name: "SearchComp",
        data() {
            return {
               // form: {},
                searchForm: {
                    pageNum: 1,
                    pageSize: 5,
                    userRelatedQueryCondition: {}
                },
               dictData: [{
                    nationality: []
                }],
            }
        },
        watch: {
            //监听搜索表单数据变化，及时更新搜索参数
            searchForm: {
                handler: function () {
                    this.searchFor(this.searchForm)
                },
                deep: true
            }
        },
        mounted() {
            this.getDictData()
        },
        methods: {
            /**
             * 获取字典数据
             */
            getDictData() {
                let that = this
                this.$AxiosApi.getzd('','yqUrl').then(res => {
                    that.dictData = res.data.data
                })
            },
            /**
             * 搜索置空
             */
            cleanAll() {
                this.searchForm = {
                    pageNum: 1,
                    pageSize: 5,
                    userRelatedQueryCondition: {}
                }
            },
            /**
             * 搜索方法，提交参数
             * @param item 搜索表单参数数据
             */
            searchFor(item) {
                this.$store.commit('searchParamMutations', item)
            },
        }
    }
</script>

<style lang="less">
    .cleanAll {
        width: calc(100% - 30px);
        position: absolute;
        top: 10%;

        button {
            width: 140px !important;
            height: 40px !important;
        }
    }

    #app {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .home {
        height: 100%;

        .top-background {
            background-color: #0081dc;
            color: white;
            height: 90px;
            width: 100%;
            font-weight: 700;
            font-size: 30px;

            .logostyle {
                padding-left: 65px;
                padding-top: 20px;
            }
        }

        .leftcontent {
            width: 250px;
            height: calc(100% - 90px);
            background-color: #0081dc;

            .el-tree {
                padding-top: 50px;
            }
        }

        .choseTree {
            color: white;
            background-color: #0081dc;

            .el-tree-node__content {
                height: 48px;
                font-size: 16px;
                text-align: center;
                display: block;
                align-items: center;
            }

            .el-tree-node__expand-icon.is-leaf {
                display: none;
            }

            .el-tree-node__content:hover {
                background-color: rgba(0, 0, 0, 0.2);
            }

            .is-current {
                background-color: rgba(0, 0, 0, 0.2);
            }
        }

        .main {
            position: absolute;
            top: 90px;
            left: 250px;
            width: calc(100% - 250px);
            height: calc(100% - 90px);
        }
    }

    .search-mtop {
        border-bottom: 15px #f0f0f0 solid;
        margin: 5px;
        height: 120px;
        display: flex;

        .el-form-item__label {
            color: #333333;
        }

        .el-form-item {
            margin-top: 10px;
            margin-left: 14px;
            margin-bottom: 0 !important;
        }

        .demo-form-inline {
            width: 1658px !important;;
            width: 70px;

            .el-form-item__label {
                width: 50px;
            }
        }

        .buttonss {
            margin-top: 10px;
            margin-left: 10px;
            width: 120px;
            margin-left: 140px;
            background-color: #0081dc;
            color: white;
        }

    }

    .buttongd {
        color: #0081dc;
        margin-left: 10px;
        width: 120px;
        height: 30px;
        line-height: 1px;
        border-color: #0081dc;
    }

</style>
